<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设备管理</title>
		<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
	</head>
	<body>
		<h1>设备管理</h1>
		<hr />
		<div>
			<button class="layui-btn " onclick="showAddUserModel()"><i class="fa fa-plus"></i> 添加设备</button>
			<button class="layui-btn layui-btn-normal" onclick="editUser()"><i class="fa fa-edit"></i>修改设备</button>
			<button class="layui-btn layui-btn-danger" onclick="deleteUser()"><i class="fa fa-trash"></i> 删除设备</button>
			<div class="layui-input-inline">
				<form action="">
					<div class="layui-input-inline">
						<input type="text" id="searchUserName" required lay-verify="required" placeholder="请输入要搜索的用户名" autocomplete="off"
						 class="layui-input">
					</div>
					<div class="layui-input-inline">
						<button class="layui-btn" onclick="searchUser()" lay-submit lay-filter="formDemo"><i class="fa fa-search"></i> 搜索<tton>
					</div>
				</form>
			</div>
		</div>



		<table id="deviceInfoTable" lay-even class="layui-table" lay-filter="test">

		</table>
		<div id="addUserModel" style="display: none;" align="center">
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;">
				<input type="hidden" name="deviceId" id="deviceId" />
				<div class="layui-form-item">
					<label class="layui-form-label">设备名称</label>
					<div class="layui-input-block">
						<input type="text" id="deviceName" name="deviceName" required lay-verify="checkUserCell" placeholder="请输入设备名称"
						 autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">区域位置</label>
					<div class="layui-input-block">
						<input type="text" id="areaId" name="areaId" required lay-verify="checkUserId" placeholder="请输入区域位置"
						 autocomplete="off" class="layui-input">
					</div>
				</div>
		
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>


		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			layui.use('table', function() {
				var table = layui.table;
			
				//第一个实例
				userTab = table.render(options);
			
			});
			var options = {
				elem: '#deviceInfoTable',
				height: 312,
				url: 'http://127.0.0.1:8080/repair/device/selectByPage', //数据接口
				page: true, //开启分页
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[ //表头
						{
							type: 'checkbox'
						}, {
							field: 'deviceId',
							title: '设备编号',
							width: 120,
							sort: true
						}, {
							field: 'deviceName',
							title: '设备名称',
							width: 200
						}, {
							field: 'areaId',
							title: '区域位置',
							width: 180
						},  {
							field: 'updateTime',
							title: '更新时间',
							width: 250,
							sort: true
						}
					]
				]
			};
			layui.use('form', function() {
				var form = layui.form;

				//自定义验证规则
				form.verify({
					checkUserName: function(value) {
						if (value.length < 2) {
							return 'ID长度不能小于2';
						}
					},
					checkUserPwd: function(value) {
						if (value.length < 2) {
							return '楼栋编码不得小于2';
						}
					},
					checkVerify: function(value) {
						if (value.length == 0) {
							return '楼层不得为空';
						}
					}

				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					//关闭模态框
					layui.use('layer', function() {

						//通过ajax提交
						console.log("8888888888888888");
						console.log(data.field.deviceName);
						console.log(data.field.areaId);
						console.log(data.field.deviceId);
					
						

						var userData;
						var url;
						if (data.field.deviceId ==" ") {
							url = "http://127.0.0.1:8080/repair/device/addDevice";
							userData = {
								deviceName: data.field.deviceName,
								areaId: data.field.areaId,
								deviceId:data.field.deviceId

							};
						} else {
							url = "http://127.0.0.1:8080/repair/device/updateDevice";
							userData = {
								deviceName: data.field.deviceName,
								areaId: data.field.areaId,
								deviceId:data.field.deviceId
								

							};
						}


						layui.$.ajax({
							url: url,
							method: "post",
							data: userData,
							dataType: "json",
							success: function(data) {
								if (data.code == 200) {
									//表示添加成功
									//关闭模态框
									layui.layer.close(userMode);
									//刷新页面
									userTab.reload(options);
									//弹出添加成功的提示
									layui.layer.msg(data.msg);

								}
								if (data.code == 500) {
									//表示添加失败
									layui.layer.msg(data.msg);
								}
							}
						});

					});
					return false;
				});
			});

			layui.use('table', function() {
				var table = layui.table;
				deviceTab = table.render(options);

			});

			function showAddUserModel() {
				clearModel();
				layui.use('layer', function() {
					var layer = layui.layer;
					var $ = layui.$;

					userMode = layer.open({
						title: '添加区域',
						type: 1,
						content: $('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				});

			}

			function editUser() {
				clearModel();
				layui.use(['table', 'layer'], function() {
					var table = layui.table;

					var checkStatus = table.checkStatus('deviceInfoTable'); //userInfoTable 即为基础参数 id 对应的值
					console.log("33333333333"); 
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					console.log(checkStatus.data[0].deviceName);
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}

					if (checkStatus.data.length > 1) {
						layui.layer.msg('请选择一条数据');
						return;
					}

					//向模态框赋值
					console.log(checkStatus.data[0].deviceName);
					layui.$('#areaId').val(checkStatus.data[0].areaId);
					layui.$('#deviceName').val(checkStatus.data[0].deviceName);
			



					//展示模态框
					userMode = layui.layer.open({
						title: '编辑用户',
						type: 1,
						content: layui.$('#addUserModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});



				})

			}

			function clearModel() {
				layui.$('#userName').val('');
				layui.$('#userPwd').val('');
			}

			function deleteUser() {
				layui.use(['table', 'layer'], function() {
					var table = layui.table;

					var checkStatus = table.checkStatus('userInfoTable'); //userInfoTable 即为基础参数 id 对应的值
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}

					var allUserId = [];
					for (var i = 0; i < checkStatus.data.length; i++) {
						allUserId.push(checkStatus.data[i].userId)

					}
					//向后台提交
					layui.$.ajax({
						url: "http://127.0.0.1:8080/repair/user/deleteUser",
						method: "post",
						data: {
							"allUserId": allUserId
						},
						dataType: "json",
						traditional: true,
						success: function(data) {
							if (data.code == 200) {
								//表示添加成功
								//关闭模态框
								//刷新页面
								userTab.reload(options);
								//弹出添加成功的提示
								layui.layer.msg(data.msg);

							}
							if (data.code == 500) {
								//表示添加失败
								layui.layer.msg(data.msg);
							}
						}
					});
					//提交成功后,刷新界面

				});
			}


			function searchUser() {
				layui.table.reload("userInfoTable", {
					where: {
						userName: layui.$("#searchUserName").val()
					}
				})
			}
		</script>

	</body>
</html>
